<template>
  <vue-modal
    title="大咖说配置"
    ok-text="提交"
    cancel-text="取消"
    :show.sync="showModal"
    effect="fade"
    :small="true"
    :width="700"
    :callback="submit">
    <div slot="modal-body" class="modal-body">
      <div class="form-group text-left form-group-sm" >
        <table class="table table-bordered table-hover">
          <caption>
            <div class="form-inline">
              音频列表
              <button class="btn btn-sm btn-success pull-right" @click="add">新增音频</button>
            </div>
          </caption>
          <thead>
            <tr>
              <th class="col-xs-1">时长(秒)</th>
              <th class="col-xs-1">是否买方问答模块</th>
              <th class="col-xs-1">配图</th>
              <th class="col-xs-1">标题</th>
              <th class="col-xs-1">语音</th>
              <th class="col-xs-2">介绍</th>
              <th class="col-xs-1">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(index, it) in form.newVoiceInfoDtos" track-by="$index">
              <td><input class="form-control" type="number"  v-model="it.duration"></td>
              <td>
                <select class="form-control" v-model="it.isQA">
                  <option value="0">否</option>
                  <option value="1">是</option>
                </select>
               </td>
              <td  v-if="index ===0" :rowspan="form.newVoiceInfoDtos.length">
                <div class="preview" v-if="voicePicUrl">
                  <img :src="voicePicUrl">
                </div>
                <input class="form-control" type="file"  accept="image/gif, image/jpeg, image/png" v-el:pic-file @change="picFileChange(this, index)">
              </td>
              <td><input class="form-control" type="text"  v-model="it.voiceTitle"></td>
              <td>
                <div class="preview" v-if="it.voiceUrl">
                  <a :href="it.voiceUrl" target="_blank">原语音</a>
                </div>
                <input class="form-control" type="file"  accept="audio/mpeg, application/ogg, audio/ogg, audio/x-wav" v-el:audio-file @change="voiceFileChange(this, index)">
              </td>
              <td>
                <textarea rows="3" class="form-control" v-model="it.voiceDetail"></textarea>
              </td>
              <td>
                  <button v-if="$index >0" class="btn btn-sm btn-danger" @click="del($index)">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <br>
      <form class="form-horizontal" role="form">
        <div class="form-group form-group-sm">
          <label class="col-sm-3 control-label">*音频总时长（秒）</label>
          <div class="row">
            <div class="col-lg-2 horizontal">
              时：<input type="number" class="form-control" v-model="form.time.hour">
            </div>
            <div class="col-lg-2 horizontal">
              分：<input type="number" class="form-control" v-model="form.time.min">
            </div>
            <div class="col-lg-2 horizontal">
              秒：<input type="text" class="form-control" v-model="form.time.sec">
            </div>
          </div>
        </div>
        <div class="form-group form-group-sm">
          <label class="col-sm-3 control-label">*音频总大小（单位:M）</label>
          <div class="col-sm-9 text-left">
            <input type="number" class="form-control" v-model="form.voiceTotalSize">
          </div>
        </div>

        <div class="form-group form-group-sm">
          <label class="col-sm-3 control-label">*标题</label>
          <div class="col-sm-9 text-left">
            <input type="text" class="form-control" v-model="form.title">
          </div>
        </div>
        <div class="form-group form-group-sm">
          <label class="col-sm-3 control-label">*发布时间</label>
          <div class="col-sm-9 text-left">
            <vue-date-picker
              :time.sync="form.pubDate"
              :option='datePickerOption'>
            </vue-date-picker>
          </div>
        </div>
        <div class="form-group form-group-sm">
          <label class="col-sm-3 control-label">*标签</label>
          <div class="col-sm-9 text-left">
            <input type="text" class="form-control" v-model="form.tags" placeholder="多标签使用逗号隔开">
          </div>
        </div>

        <div class="form-group form-group-sm">
          <label class="col-sm-3 control-label">*主讲人</label>
          <div class="col-sm-9 text-left">
            <input type="text" class="form-control" v-model="form.speaker">
          </div>
        </div>
        <div class="form-group form-group-sm">
          <label class="col-sm-3 control-label">*主讲人介绍</label>
          <div class="col-sm-9 text-left">
            <textarea rows="3" class="form-control" v-model="form.introduction"></textarea>
          </div>
        </div>
        <div class="form-group form-group-sm">
          <label class="col-sm-3 control-label">*会议精粹</label>
          <div class="col-sm-9 text-left">
            <textarea rows="3" class="form-control" v-model="form.meetingPith"></textarea>
          </div>
        </div>
        <div class="form-group form-group-sm">
          <label class="col-sm-3 control-label">*券商观点</label>
          <div class="col-sm-9 text-left">
            <textarea rows="3" class="form-control" v-model="form.securitiesViewpoint"></textarea>
          </div>
        </div>
        <div class="form-group form-group-sm">
          <label class="col-sm-3 control-label">*大咖对话</label>
          <div class="col-sm-9 text-left">
            <textarea rows="3" class="form-control" v-model="form.guestQA"></textarea>
          </div>
        </div>
        <div class="form-group form-group-sm">
          <label class="col-sm-3 control-label">*买方问答</label>
          <div class="col-sm-9 text-left">
            <textarea rows="3" class="form-control" v-model="form.buyerQA"></textarea>
          </div>
        </div>

        <div class="form-group form-group-sm">
          <label class="col-sm-3 control-label">大咖说主题分类</label>
          <div class="col-sm-9 text-left">
            <select class="form-control" v-model="form.voiceTypeId">
              <option value="0">无</option>
              <option v-for="i in classificationList" :value="i.voiceType">{{i.voiceType}}-{{i.name}}</option>
            </select>
          </div>
        </div>
        <div class="form-group form-group-sm">
          <label class="col-sm-3 control-label">买方问答模块ID</label>
          <div class="col-sm-9 text-left">
            <select class="form-control" v-model="form.buyerQAId">
              <option value="0">无</option>
              <option v-for="i in buyerList" :value="i.id">{{i.id}}-{{i.name}}</option>
            </select>
          </div>
        </div>
      </form>
      <br>
      <div class="form-group text-left form-group-sm" >
        <table class="table table-bordered table-hover">
          <caption>
            <div class="form-inline">
              业绩追踪列表
              <button class="btn btn-sm btn-success pull-right" @click="addPerformances">新增</button>
            </div>
          </caption>
          <thead>
            <tr>
              <th class="col-xs-1">名称</th>
              <th class="col-xs-1">类型</th>
              <th class="col-xs-2">开始日期</th>
              <th class="col-xs-1">code</th>
              <th class="col-xs-1">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(index, it) in form.performances" track-by="$index">
              <td>
                <input type="text" class="form-control" v-model="it.name">
              </td>
              <td>
                <select class="form-control" v-model="it.type">
                  <option value="1">组合</option>
                  <option value="2">指数</option>
                  <option value="3">股票</option>
                </select>
              </td>
              <td>
                <vue-date-picker
                  :time.sync="it.startDate"
                  :option='timePickerOption'>
                </vue-date-picker>
               </td>
              <td>
                <input type="text" class="form-control" v-model="it.code">
              </td>
              <td>
                  <button v-if="$index >0" class="btn btn-sm btn-danger" @click="delPerformances($index)">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </vue-modal>
</template>
<style src="./item-config.css" scoped></style>
<script src="./item-config.js"></script>